# FloatingFocusManager

Provides flexible focus management for a floating element.

This component should only be rendered when the floating element
is open and directly wrap it.

{/* prettier-ignore */}
```js /context/
import {
  FloatingFocusManager
} from '@floating-ui/react-dom-interactions';

function App() {
  const {context} = useFloating();

  return (
    <>
      {/* reference element */}
      {open && (
        <FloatingFocusManager context={context}>
          {/* floating element */}
        </FloatingFocusManager>
      )}
    </>
  );
}
```

## Props

```js
interface Props {
  context: FloatingContext;
  order?: Array<'reference' | 'floating' | 'content'>;
  initialFocus?:
    | number
    | React.MutableRefObject<HTMLElement | null>;
  returnFocus?: boolean;
  preventTabbing?: boolean;
  endGuard?: boolean;
  modal?: boolean;
}
```

### context

**Required**

The `context{:.const}` object returned from `useFloating(){:js}`.

```js
<FloatingFocusManager context={context}>
  {/* floating element */}
</FloatingFocusManager>
```

### order

default: `['content']{:js}`

The order in which focus cycles.

```js
<FloatingFocusManager
  context={context}
  // Initially focuses the floating element. Subsequent tabs
  // will cycle through the tabbable contents of the floating
  // element.
  order={['floating', 'content']}
  // Keeps focus on the reference element. Subsequent tabs
  // will cycle through the tabbable contents of the floating
  // element.
  order={['reference', 'content']}
>
  {/* floating element */}
</FloatingFocusManager>
```

### initialFocus

default: `0{:js}`

Which element to initially focus. Can be either a number
(tabbable index as specified by the `order{:.objectKey}`) or a
ref.

> This does not have an effect when `preventTabbing{:.keyword}`
> is enabled.

```js
<FloatingFocusManager
  context={context}
  initialFocus={elementRef}
>
  {/* floating element */}
</FloatingFocusManager>
```

### returnFocus

default: `true{:js}`

Determines if focus should be returned to the element that was
focused prior to opening the floating element (usually the
reference element).

> This does not have an effect when `preventTabbing{:.keyword}`
> is enabled.

```js
<FloatingFocusManager context={context} returnFocus={false}>
  {/* floating element */}
</FloatingFocusManager>
```

### preventTabbing

default: `false{:js}`

Determines if the tab key does not perform any action, so that
focus cannot escape the floating element. Focus is instead
handled by `useListNavigation(){:js}` (i.e. arrow key
navigation).

This prop is required when the focus is
[modal](/docs/FloatingFocusManager#modal) and the floating
element is portalled outside of the reference element's DOM
context.

```js
<FloatingFocusManager context={context} preventTabbing={true}>
  {/* floating element */}
</FloatingFocusManager>
```

### endGuard

default: `true{:js}`

Determines if the end focus guard (after the floating element) is
rendered. If not, focus can escape into the address bar, like in
native dialogs. This means the floating element must be portalled
to the very end of the document.

```js
<FloatingFocusManager context={context} endGuard={false}>
  {/* floating element */}
</FloatingFocusManager>
```

### modal

default: `true{:js}`

Determines if focus is "modal", meaning focus is fully trapped
inside the floating element and outside content cannot be
accessed. This includes screen reader virtual cursors.

> If `false{:js}`, the floating element must be rendered directly
> after its reference element (e.g. not in a FloatingPortal).

```js
<FloatingFocusManager context={context} modal={false}>
  {/* floating element */}
</FloatingFocusManager>
```

#### Input comboboxes

`<input />{:js}` comboboxes should not be modal when possible.
When setting them to modal, focus does not become modal but
screen reader virtual cursors do become modal. Therefore, the
listbox should have a visually-hidden dismiss button to ensure
touch-based screen reader users can escape the list without
needing to select anything.
